<template>
	<view class="shaped-page">
		<view class="shaped-box">
			<view class="img-list" @touchstart="touchStart" @touchend="touchEnd">
				<view class="item" :class="{ activeImage: optionList[index].content == true }" v-for="(item, index) in list"
					:key="'http://gpt.szyirxx.com' + item.image" :style="{
						left: optionList[index].left + 'rpx',
						top: optionList[index].top + 'rpx',
					}">
					<image :showLoading="true" :src="'http://gpt.szyirxx.com' + item.image"></image>
				</view>
			</view>
			<view class="micro">
				<view class="cpu">
					<view class="title">
						{{ item.name }}
					</view>
					<view class="num">
						算力值{{ item.values }}%/月
					</view>
				</view>
				<view class="tips">
					<view class="text">
						{{ item.desc }} </br><text v-if="item.type == 2">(每日限量:{{item.remain}}/{{item.num}})</text> <text v-if="item.type == 3">(总限量:{{item.remain}}/{{item.num}})</text>
					</view>
					<view class="num">
						{{ Number(item.price).toFixed(0) }}U
					</view>
				</view>
			</view>
			<view class="tips-text">
				账户可以升级，升级只需要补差额即可按照实际级别收益。比如：
			</view>
			<view class="prompt">
				<view class="drop"></view>
				<view>
					3000U升级5000U则需要补差额2000U即可。
				</view>
			</view>
			<view class="prompt">
				<view class="drop"></view>
				<view>
					当天升级的账户，次日12点结算才按照新的收益结算。
				</view>
			</view>
		</view>
		<view class="btn-box">
			<view class="btn">
				<u-button size="large" :disabled="getDisabled" @click="handleBuy" shape="circle"
					:text="buyType.id ? '一键升级' : '一键激活'"
					color="linear-gradient(to right, rgb(104, 151, 255), rgb(135, 186, 255))"></u-button>
			</view>
			<view class="btn">
				<u-button color="#0B0D1C" size="large" shape="circle" type="primary" text="运转详情" @click="open"></u-button>
			</view>
		</view>
		<view class="info-box">
			<view class="title-box">
				<view class="title">
					<view class="_th">
						时间
					</view>
					<view class="_th">
						类别
					</view>
					<view class="_th">
						收益
					</view>
				</view>
			</view>
			<view>
				<view class="content" v-for="(item, index) in powerProfitList" :key="index">
					<view class="time">
						{{$u.timeFormat(item.calculate_time, 'mm月dd日')}}
					</view>
					<view class="way">
						{{ item.memo }}
					</view>
					<view class="num">
						{{ item.cbu }}
					</view>
				</view>
				<u-empty width="264rpx" height="203.72rpx" :show="quest.finished" mode="car" icon="/static/ecology/no-data.png"
					text="没有更多数据了">
				</u-empty>
			</view>
		</view>
		<u-popup :show="show" mode="center" @close="close" round="30">
			<view class="operate">
				<view class="operate-title">
					运作详情
				</view>
				<view class="cost">
					40%作为平台服务费
				</view>
				<view class="operate-info">
					<view class="info-title">
						<view class="title-text">
							时间
						</view>
						<view class="title-text">
							运行数据
						</view>
						<view class="title-text">
							CBU收益
						</view>
					</view>
					<view class="r-list">
						<view class="info-item" v-for="(item, index) in list1" :key="index">
							<view>
								{{$u.timeFormat(item.release_time, 'mm月dd日')}}
							</view>
							<view class="item-text">
								{{ item.sn }}
							</view>
							<view>
								{{ item.cbu }}
							</view>
						</view>
						<u-empty width="264rpx" height="203.72rpx" :show="list1.length == 0" mode="car"
							icon="/static/ecology/no-data.png" text="暂无数据">
						</u-empty>
					</view>
				</view>
				<view class="close-btn" @click="close">
					关闭
				</view>
			</view>
		</u-popup>
		<u-modal :show="showBuy" title="提示" @confirm="confirm" @cancel="showBuy = false" :content='content'
			:showCancelButton="true"></u-modal>
	</view>
</template>

<script>
export default {
	data () {
		return {
			showBuy: false,
			show: false,
			content: '',
			startX: 0,
			startY: 0,
			startTime: 0,
			list: [],
			list1: [],
			item: {},
			activeIndex: 0,
			buyType: {
				id: '',
				price: 0
			},
			quest: {
				page: 1,
				limit: 10,
				finished: false,
				loading: false
			},
			powerProfitList: [],
			optionList: [
				{
					left: 270,
					top: 0,
					content: false
				},
				{
					left: 60,
					top: 50,
					content: false
				},
				{
					left: 30,
					top: 200,
					content: false
				},
				{
					left: 164,
					top: 222,
					content: true
				},
				{
					left: 510,
					top: 200,
					content: false
				},
				{
					left: 470,
					top: 50,
					content: false
				}
			]
		}
	},
	onLoad () {
		this.postinfo()
		this.getList()
	},
	computed: {
		getDisabled () {
			let { id, price } = this.buyType
			price = Number(price)
			if (id !== '' && price >= Number(this.item.price)) {
				return true;
			}
			return false
		}
	},
	onReachBottom () {
		if (this.quest.finished) return
		this.getList()
	},
	methods: {
		confirm () {
			this.$Request({
				method: 'POST',
				url: '/user/buyPower',
				data: {
					power_id: this.item.id
				}
			}).then(res => {
				const { code, msg } = res.data
				if (code == 1) {
					this.showBuy = false
					this.getUserInfo()
				}
				uni.showToast({
					title: msg,
					icon: 'none'
				})
			})
		},
		handleBuy () {
			this.showBuy = true
			const obj = this.item
			const price = Number(obj.price) - Number(this.buyType.price)
			this.content = `是否确定消耗${price}USD激活${obj.name}？`
		},
		getUserInfo (first) {
			this.$Request({
				method: 'POST',
				url: '/user/getUserPower'
			}).then(res => {
				const { code, data } = res.data
				if (code == 1) {
					if (data) {
						this.buyType = data
						if (first) {
							const index = this.baseList.findIndex(item => item.id == data.power_id)
							for (let i = 0; i < index; i++) {
								this.moveRight(true)
							}
						}
					}
				}
			})
		},
		getList () {
			if (this.quest.loading) return
			this.quest.loading = true
			const that = this
			this.$Request({
				method: 'POST',
				url: '/user/getPowerProfit',
				data: this.quest
			}).then(res => {
				that.quest.loading = false
				const { code, data } = res.data
				if (code == 1) {
					const list = data.data
					if (list.length > 0) {
						that.powerProfitList = that.powerProfitList.concat(list)
					}
					if (data.last_page === that.quest.page) {
						that.quest.finished = true
					} else {
						that.quest.page++
					}
				}
			}).catch(() => {
				this.quest.loading = false
			})
		},
		postinfo () {
			this.$Request({
				method: 'POST',
				url: '/power/getPowerList'
			}).then(res => {
				if (res.data.code == 1) {
					const list = res.data.data.data
					this.baseList = list
					this.list[3] = list[0]
					this.list[4] = list[5]
					this.list[5] = list[4]
					this.list[0] = list[3]
					this.list[1] = list[2]
					this.list[2] = list[1]
					this.item = list[0]
					this.getUserInfo(true)
				}
			})
		},
		moveRight (type = true, isBreak = false) {
			if (!type) {
				const obj = this.optionList.pop()
				this.optionList.unshift(obj)
			} else {
				const obj = this.optionList.shift()
				this.optionList.push(obj)
			}
			if (!isBreak) {
				if (!type) {
					this.activeIndex--
				} else {
					this.activeIndex++
				}
				if (this.activeIndex === -1) {
					this.activeIndex = this.baseList.length - 1
				}
				if (this.activeIndex === this.baseList.length) {
					this.activeIndex = 0
				}
				this.item = this.baseList[this.activeIndex]
			}

			this.optionList.forEach((e) => {
				e.content = false
				if (e.left == 164) {
					e.content = true
				}
			});
		},
		touchEnd (e) {
			const moveX = e.changedTouches[0].clientX - this.startX
			const moveY = e.changedTouches[0].clientY - this.startY
			const duration = e.timeStamp - this.startTime
			if (Math.abs(moveX) > Math.abs(moveY) && duration < 500) {
				if (moveX > 0) {
					this.moveRight()
				} else {
					this.moveRight(false)
				}
			}
		},
		touchStart (e) {
			this.startTime = e.timeStamp
			this.startX = e.touches[0].clientX
			this.startY = e.touches[0].clientY
		},
		open () {
			this.$Request({
				method: 'POST',
				url: '/user/getReleaseLog',
				data: {
					page: 1,
					limit: 100
				}
			}).then(res => {
				const {code, data } = res.data
				if (code == 1) {
					this.list1 = data.data
					this.show = true
				}
			})

		},
		close () {
			this.show = false
		}
	}
}
</script>

<style lang="scss" scoped>

.shaped-page {
	padding: 30rpx;
	
	.r-list {
		margin-top: 20rpx;
		height: 600rpx;
		overflow-y: auto;
	}

	.operate {
		width: 686rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		padding: 30rpx;

		.operate-title {
			text-align: center;
			color: #333333;
			font-size: 32rpx;
			font-weight: 700;
		}

		.cost {
			text-align: center;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #FFA025;
		}

		.operate-info {
			padding: 30rpx 0;

			.info-title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				>:nth-child(2) {
					text-align: center;
				}

				>:nth-child(3) {
					text-align: right;
				}

				.title-text {
					width: 120rpx;
					color: #999999;
					font-size: 24rpx;
				}
			}

			.info-item {
				display: flex;
				justify-content: space-between;
				color: #333333;
				font-size: 24rpx;
				padding: 10rpx 0;
				margin-top: 20rpx;

				view {
					text-align: left;
					// flex: 1;
				}

				>:nth-child(2) {
					text-align: center;
				}

				>:nth-child(3) {
					text-align: right;
				}
			}
		}

		.close-btn {
			width: 300rpx;
			line-height: 100rpx;
			background-color: #F3F5F6;
			font-size: 28rpx;
			color: #1F2033;
			text-align: center;
			border-radius: 50rpx;
			margin: 20rpx auto;
		}
	}

	.shaped-box {
		padding: 30rpx;
		background-image: url('/static/ai/ai-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		border-radius: 30rpx;

		.img-list {
			position: relative;
			height: 420rpx;

			.item {
				position: absolute;
				transition: left 0.5s, top 0.5s, width 0.5s, height 0.5s;
				width: 104rpx;
				height: 104rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.activeImage {
				padding: 20rpx;
				margin: -80rpx 20rpx 0 20rpx;
				background-image: url('/static/ai/icon-bg.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 280rpx;
				height: 280rpx;
			}
		}

		.one {
			display: flex;
			justify-content: center;

			.item-one {
				width: 60%;
				display: flex;
				justify-content: space-around;
			}
		}

		.two {
			display: flex;
			justify-content: space-between;
		}

		.three {
			display: flex;
			justify-content: center;
			margin-top: 20rpx;

			.pitch {
				padding: 20rpx;
				margin: -80rpx 20rpx 0 20rpx;
				background-image: url('/static/ai/icon-bg.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
		}

		.micro {
			margin-top: 30rpx;
			background-color: #ffffff;
			padding: 20rpx;
			border-radius: 20rpx;

			.cpu {
				display: flex;
				justify-content: space-between;

				.title {
					color: #333333;
					font-size: 32rpx;
					font-weight: 700;
					text{
						font-size: 26rpx;
						font-weight: 400;
						margin-left: 10rpx;
					}
				}

				.num {
					color: #6897FF;
					font-size: 24rpx;
					padding: 10rpx;
					border-radius: 10rpx;
					background-color: rgba(104, 151, 255, 0.16);
				}
			}

			.tips {
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.text {
					font-size: 24rpx;
					color: #999999;
				}

				.num {
					color: #333333;
					font-size: 32rpx;
					font-weight: 700;
				}
			}
		}

		.tips-text {
			color: #CCCCCC;
			font-size: 24rpx;
			margin-top: 20rpx;
		}

		.prompt {
			margin-top: 20rpx;
			color: #CCCCCC;
			font-size: 24rpx;
			display: flex;
			align-items: center;

			.drop {
				width: 8rpx;
				height: 8rpx;
				background-color: #ffffff;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}
	}

	.btn-box {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;

		.btn {
			width: 45%;
		}
	}

	.info-box {
		border-radius: 30rpx;
		background-color: #F6FAFF;
		padding-bottom: 30rpx;

		.title {
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			border-bottom: 1rpx solid #ffffff;

			._th {
				font-size: 24rpx;
				color: #999999;
			}
		}

		.content {
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			font-size: 24rpx;
			color: #333333;

			.time {
				width: 25%;
			}

			.way {
				width: 40%;
				text-align: center;
			}

			.num {
				width: 25%;
				text-align: right;
			}
		}
	}
}
</style>